import * as $util from '../lib/hc-util.js'

const hc$rule$class9$dialog = {
    data: function() {
        return {
            class9List: [],
            subClass9Filters: [],
            search_: '',
            visible: false
        }
    },
    props: ['rtype', 'ruledefinition'],
    filters: {
        exclusion: function(list) {
            return list
        }
    },
    created() {
        let typ = this.rtype ? this.rtype : 'rule:clas:';
        //step1 clas list
        let lst = $pinfo.ruleList.filter(it => it.rtype.startsWith(typ));
        let classMap = {}
        lst.forEach(it => {
            it.rcode = $util.rpath(it).rcode();
            it.rtypeName = $config.componentMap[it.rtype].rname;
            classMap[it.rtype] = it.rtypeName;
        })
        this.class9List = lst;

        //step2 filters list
        let filters = []
        for (let p in classMap) {
            filters.push({
                text: classMap[p],
                value: p
            })
        }
        this.subClass9Filters = filters
    },
    mounted() {},
    methods: {
        triggerSearchInput: function(val) {
            if (!this.$data.class9ListOriginal) this.$data.class9ListOriginal = this.$data.class9List
            let lst = this.$data.class9ListOriginal
            if (val)
                this.class9List = lst.filter(it =>
                    it.rname.indexOf(val) >= 0 ||
                    it.rcode.indexOf(val) >= 0
                )
            else this.class9List = lst
        },
        filterSubClass9: function(value, row, column) {
            return row.rtype === value;
        },
        triggerClass9Selected: function(row) {
            this.onRowSelected(row);
        },
        triggeRowSelected: function(newVal, oldVal) {
            //this.onRowSelected(newVal);
        },
        triggerRowDblClick: function(row, col, evt) {
            this.onRowSelected(row);
        },
        onRowSelected: function(row) {
            this.class9selected(row);
            this.visible = false;
        },
        class9selected: function(ruleDef) {
            console.warn('The listener of row selected is not registered')
        }
    },

    template: `
			<el-dialog :visible.sync="visible" :title="'选择需要的分类'">
				<el-table :data="class9List | exclusion" size='small' highlight-current-row height='400' stripe :default-sort="{prop: 'rtype', order: 'ascending'}"
				 @current-change='triggeRowSelected' @row-dblclick='triggerRowDblClick'>
					<el-table-column property="rname" label="名称" sortable></el-table-column>
					<el-table-column property="rcode" label="代码" sortable></el-table-column>
					<el-table-column property="rtypeName" label="归类" :filters="subClass9Filters" :filter-method="filterSubClass9"></el-table-column>
					<el-table-column label="操作">
						<template slot="header" slot-scope="scope">
							<el-input v-model="search_" size="mini" @change="triggerSearchInput" placeholder="输入关键字搜索" />
						</template>
						<template slot-scope="{row,$index}">
							<el-button type='primary' plain round size='mini' @click="triggerClass9Selected(row)">选入</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-button @click='visible = false'>取消</el-button>
			</el-dialog>

				`
}


//el: same with definiton in Vue
export default function HcRuleClass9Dialog(cfg) {
    let Rule$Class9$Dialog = Vue.extend(hc$rule$class9$dialog)

    let vm = new Rule$Class9$Dialog();
    if (cfg.el) {
        vm.$mount({
            el: cfg.el
        });
    } else {
        vm.$mount();
        document.body.appendChild(vm.$el)
    }

    if (cfg.ruledefinition)
        vm.ruledefinition = cfg.ruledefinition;
    if (cfg.class9selected)
        vm.class9selected = cfg.class9selected;

    if (cfg.exclude) {
        vm.$options.filters.exclusion = function(list) {
            let lst = []
            list.forEach(it => {
                if (!cfg.exclude(it.rpath))
                    lst.push(it)
            })
            return lst
        }
    }
    this.vm = vm;

    return {
        show: function(cfg) {
            vm.visible = true;
            return this
        },
        vm: vm
    }
};
